<template>
  <!-- 推荐区域 -->
  <view class="recommend_warp">
    <view class="goods_info_warp">
      <view
        class="goods_item"
        v-for="goods_item in goodsList"
        :key="goods_item.goods_id"
        @click="handleItemChange(goods_item.goods_id)"
      >
        <view class="goods_image">
          <image
            mode="widthFix"
            :src="
              goods_item.goods_small_logo
                ? goods_item.goods_small_logo
                : 'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'
            "
          ></image>
        </view>
        <view class="goods_price">
          <text class="new_price">￥{{ goods_item.goods_price }}</text>
          <text class="old_price"
            >￥{{
              goods_item.goods_price === 0
                ? 0
                : (goods_item.goods_price * 1.2).toFixed(0)
            }}</text
          >
        </view>
        <view class="goods_name">
          {{ goods_item.goods_name }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["goodsList"],
  methods: {
    handleItemChange(e) {
      this.$emit("goodsItemId", e);

    },
  },
};
</script>

<style lang="less">
// 推荐商品区域
.recommend_warp {
  // 内容
  .goods_info_warp {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .goods_item {
      padding: 10rpx 10rpx 30rpx 10rpx;
      width: 45%;
      margin: 1%;
      background-color: #fff;
      // height: 600rpx;
      // display: flex;
      .goods_image {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20rpx;
        image {
          width: 80%;
        }
      }
      .goods_price {
        display: flex;
        align-items: flex-end;
        .new_price {
          color: #ce665b;
          font-style: 32rpx;
          font-weight: 600;
        }
        .old_price {
          color: #ccc;
          font-size: 24rpx;
          text-decoration: line-through;
          padding-left: 20rpx;
        }
      }
      .goods_name {
        margin-top: 20rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }
  }
}
</style>
